<template>
  <div style="display: flex">
    <transition name="el-zoom-in-center">
      <div style="display: flex;flex-direction: column;width: 200px;" v-show="isShow">
        <el-header>
          <svg-icon class="primary" :icon-class="icon"/>
          <span class="primary">{{title}}</span>
        </el-header>
        <el-tree highlight-current :data="department" :props="defaultProps" node-key="id"
                 ref="treeForm"
                 :expand-on-click-node="false"
                 @node-click="handleNodeClick">
            <span style="position: relative;width: 100%" class="slot-t-node" slot-scope="{ node, data }">
                <i :class="{'el-icon-office-building primary': data.type==0, 'el-icon-school':data.type==1}"/>
                <i :class="{'el-icon-folder': data.sql? false: true }"></i>
                <i :class="{'el-icon-tickets': data.sql? true: false }"></i>
                <span>{{ data.name }}</span>
                <div
                  style="position: absolute;right: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center;top: 0">
                </div>
            </span>
        </el-tree>
      </div>
    </transition>
    <div class="leftBotton_Css" @click="leftBotton">
      <a style="width: 100%">
        <div class="left_css">
          <i :class="[isShow ?'el-icon-caret-left':'el-icon-caret-right']"></i>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
  import utils from '../../../utils/utils.js'
  import request from '@/utils/request'
  export default {
    data() {
      return {
        isShow: true,
        categoryId: '',
        sorting: [],
      }
    },
    props: {
      department: {type: Array, default: () => []},
      defaultProps: {},
      icon: '',
      title: '',
    },
    methods: {
      leftBotton: function () {
        this.isShow = !this.isShow
      },
      handleNodeClick(data) {
        console.log(data);
        this.$emit('handleNodeClick', data);
        this.categoryId = data.id
      }
    }
  }
</script>

<style scoped>


  .leftBotton_Css {
    min-height: calc(100vh - 84px);
    background-color: #f2f2f2;
    width: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .left_css {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #999999;
    border-radius: 2px;
  }

  .rightLayout {
    width: 100%;
    height: 100%;
  }

  .el-header {
    border-bottom: 1px solid #f2f2f2;
    color: #333;
    line-height: 60px;
  }


  .el-menu {
    border: none !important;
  }

  .user_el-form-item {
    margin-bottom: 0 !important;
  }

  .el-mainBox {
    padding: 0 !important;
  }

  .el-headerTitle {
    font-size: 20px;
    color: #409EFF;
  }
</style>
